<template>
	<view class="container">
		<view class="top-container">
			<view class="camera-title-box">
				<view class="title-left">
					<view class="cameraName">
						摄像机323129092
					</view>
					<view class="time">2022-12-21~2022-12-21</view>
				</view>
				<view class="title-right">
					当前状态：
					<text>在线</text>
				</view>
			</view>
			<view class="camera">
				<video id="video"  autoplay src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
			</view>
			<view class="controls">
				<view class="control-left">
					<u-image src="@/static/centerButton.png" width="166rpx" height="166rpx" @click="clickCenter($event)"></u-image>
					<u-image  :customStyle="topStyle" src="@/static/topButton.png" width="97rpx" height="63rpx" @click="clickTop($event)"></u-image>
					<u-image  :customStyle="rightStyle" src="@/static/rightButton.png" width="61rpx" height="97rpx" @click="clickRight($event)"></u-image>
					<u-image  :customStyle="bottomStyle" src="@/static/bottomButton.png" width="97rpx" height="63rpx" @click="clickBottom($event)"></u-image>
					<u-image  :customStyle="leftStyle" src="@/static/leftButton.png" width="61rpx" height="97rpx" @click="clickLeft($event)"></u-image>
				</view>
				<view class="control-right">
					<view class="icon-box-1 icon-box">
						<u-icon class="icon" name="plus" size="64rpx" color="#1BC46D" @click="zoomIn"></u-icon>
					</view>
					<view class="icon-box-2 icon-box">
						<u-icon class="icon" name="minus" size="64rpx" color="#1BC46D" @click="zoomOut"></u-icon>
					</view>
					<view class="icon-box-3 icon-box">
						<u-image class="icon" src="@/static/zoomIn.png" width="64rpx" height="64rpx" @click="fullScreen"></u-image>
					</view>
					<view class="icon-box-4 icon-box">
						<u-icon class="icon" name="camera" size="88rpx" color="#1BC46D" @click="screenShot"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-container">
			<view class="title">
				<view class="left-text">拍摄照片</view>
				<view class="right-text">
					共计
					<text class="number">0</text>
					张
				</view>
			</view>
			<view class="photo-box">
				<swiper class="swiper" circular autoplay v-if="list && list.length>=1">
					<swiper-item class="swiper-item" v-for="(item,i) in list" :key="i" @click="checkShot">
						<u--image width="690rpx" height="400rpx" :src="item"></u--image>
					</swiper-item>
				</swiper>
				<view class="empty" v-else>
					<view>
						<u--image width="168rpx" height="110rpx" :src="emptyImage"></u--image>
						<text class="text">暂无数据</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				emptyImage:require('@/static/empty-icon.png'),
				topStyle:{
					position:'absolute',
					top:24+'rpx',
					left:126+'rpx'
				},
				rightStyle:{
					position:'absolute',
					top:125+'rpx',
					right:20+'rpx'
				},
				bottomStyle:{
					position:'absolute',
					bottom:24+'rpx',
					left:126+'rpx'
				},
				leftStyle:{
					position:'absolute',
					top:125+'rpx',
					left:20+'rpx'
				},
				list:[
					require("@/static/area.png"),
					require("@/static/messages.png"),
					require("@/static/orders.png"),
				],
				videoContext:null,
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext("video",this)
		},
		methods:{
			clickCenter(e){
				console.log(e);
			},
			clickTop(e){
				console.log(e);
			},
			clickRight(e){
				console.log(e);
			},
			clickBottom(e){
				console.log(e);
			},
			clickLeft(e){
				console.log(e);
			},
			zoomIn(){
				
			},
			zoomOut(){
				
			},
			fullScreen(){
				this.videoContext.requestFullScreen({
					direction:90
				})
			},
			screenShot(){
				
			},
			checkShot(){
				uni.previewImage({
					urls:this.list,
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding: 30rpx 30rpx 92rpx 30rpx;
	.top-container{
		background-color: #ffffff;
		border-radius: 20rpx;
		.camera-title-box{
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			.title-left{
				display: flex;
				flex-direction: column;
				align-items: center;
				.cameraName{
					color: #282828;
				}
				.time{
					font-size: 26rpx;
					color: #8C8C8C;
				}
			}
			.title-right{
				font-size: 26rpx;
				color:#8c8c8c;
				text{
					color: #1BC46D;
				}
			}
		}
		#video{
			width: 100%;
			height: 388rpx;
		}
		.controls{
			width: 100%;
			height: 349rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.control-left{
				width: 344rpx;
				height: 349rpx;
				border-right: 5rpx solid #f0f0f0;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}
			.control-right{
				width: 346rpx;
				display: flex;
				flex-wrap: wrap;
				.icon-box{
					width: 173rpx;
					height: 173rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
				}
				text{
					border:0;
				}
				.icon-box-1 {
					border-right: 1rpx solid #f0f0f0;
					border-bottom: 1rpx solid #f0f0f0;
				}
				.icon-box-2 {
					border-left: 1rpx solid #f0f0f0;
					border-bottom: 1rpx solid #f0f0f0;
				}
				.icon-box-3 {
					border-right: 1rpx solid #f0f0f0;
					border-top: 1rpx solid #f0f0f0;
				}
				.icon-box-4 {
					border-left: 1rpx solid #f0f0f0;
					border-top: 1rpx solid #f0f0f0;
				}
			}
		}
	}
	.bottom-container{
		.title{
			padding: 32rpx 30rpx;
			display: flex;
			justify-content: space-between;
			.left-text{
				width: 128rpx;
				height: 32rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #1D1D1D;
				line-height: 32rpx;
			}
			.right-text{
				color: #8C8C8C;
				font-size: 32rpx;
				letter-spacing: 5rpx;
				.number{
					color:#1BC46D;
				}
			}
		}
		.photo-box{
			background-color: #ffffff;
			border-radius: 20rpx;
			width: 100%;
			height: 335rpx;
			overflow: hidden;
			.swiper{
				height: 100%;
				.swiper-item{
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.empty{
				width: 100%;
				height: 335rpx;
				position: relative;
				view{
					position: absolute;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					left:calc(50% - 84rpx);
					top: 85rpx;
					.text{
						margin-top: 10rpx;
						width: 112rpx;
						height: 36rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #1BC46D;
						line-height: 36rpx;
					}
				}
			}
		}
	}
}
</style>
